<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>不用柯里化去实现_第一种</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			//何为受控：所有输入类的元素，随着用户的输入，数据“自动”维护到state中
			//定义组件
			class Login extends React.Component{
				//初始化state
				state = {username:'',password:''}
				render(){
					return (
						<form onSubmit={this.handlerSubmit}>
							用户名：<input onChange={ (event)=>{this.saveUserData('username',event.target.value)} } type="text"/>
							密码：<input onChange={ (event)=>{this.saveUserData('password',event.target.value)} } type="password"/>
							<button>登录</button>
						</form>
					)
				}

				saveUserData = (key,value)=>{
					this.setState({[key]:value})
				}

				//点击登录按钮的回调
				handlerSubmit = (event)=>{
					event.preventDefault()//阻止表单提交
					const {username,password} = this.state
					alert(`用户名：${username},密码：${password}`)
				}
			}
			//渲染组件
			ReactDOM.render(<Login/>,document.getElementById('root'))
		</script>
	</body>
</html>